<template>
  <p>队列 loading 仅适用于页面初始化, 生命周期存在与 mounted 中, 初始化完成后将卸载 hook 调用</p>
  <div v-loading="queueLoading" style="margin-top: 10px; height: 30vh; background-color: rgba(0, 0, 0, 0.3)"></div>
  <slot :html="html" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

import useLoading from "../../../../../hooks/useLoading";

import http from "../../../../../api";

const { queueId, queueLoading } = useLoading();

const html = ref(`
<template>
  <div v-loading="queueLoading" style="margin-top: 10px; height: 30vh; background-color: rgba(0, 0, 0, 0.3)"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

import useLoading from "../../../../../hooks/useLoading";

import http from "../../../../../api";

const { queueId, queueLoading } = useLoading();

/**
 * 任意的接口
 * 封装请求 api 时将队列 id 作为特殊参数传入 config 中
 */
const queryOptions = () => {
  return http.get("", {}, { queueId });
};

// 任意的接口获取
const queryData = () => {
  return http.get("", {}, { queueId });
};

// 初始化页面
onMounted(() => {
  queryOptions();
  queryData();
});
<\/script>
`);

/**
 * 任意的接口
 * 封装请求 api 时将队列 id 作为特殊参数传入 config 中
 */
const queryOptions = () => {
  return http.get("", {}, { queueId });
};

// 任意的接口获取
const queryData = () => {
  return http.get("", {}, { queueId });
};

// 初始化页面
onMounted(() => {
  queryOptions();
  queryData();
});
</script>
